import 'package:flutter/material.dart';

class AnimationPage extends StatefulWidget {
  final Map<String, dynamic> arguments;
  AnimationPage({Key key, this.arguments}) : super(key: key);

  @override
  _AnimationPageState createState() => _AnimationPageState();
}

class _AnimationPageState extends State<AnimationPage> with TickerProviderStateMixin {
  //
  AnimationController _zoomAnimationController;
  Animation _zoomAnimation;
  Animation _colorAnimation;

  //
  AnimationController _curvedAnimationController;
  CurvedAnimation _curvedAnimation;

  //
  AnimationController _customAnimationController;

  @override
  void initState() {
    super.initState();

    // ====================================================================================================
    // zoom color
    _zoomAnimationController = AnimationController(
      // value: 50.0,
      duration: Duration(milliseconds: 300),
      // lowerBound: 50.0,
      // upperBound: 200.0,
      vsync: this,
    );

    _zoomAnimationController.addListener(() {
      setState(() {});
      print(_zoomAnimationController.value);
    });
    _zoomAnimationController.addStatusListener((status) {
      print(status);
    });
    _zoomAnimation = Tween(begin: 50.0, end: 100.0).animate(_zoomAnimationController);
    _colorAnimation = ColorTween(begin: Colors.grey, end: Colors.red).animate(_zoomAnimationController);

    // ====================================================================================================
    // curved
    _curvedAnimationController = AnimationController(duration: Duration(milliseconds: 600), vsync: this);
    _curvedAnimationController.addListener(() {
      setState(() {});
    });
    _curvedAnimation = CurvedAnimation(parent: _curvedAnimationController, curve: Curves.bounceOut);

    // ====================================================================================================
    // custom animation widget
    _customAnimationController = AnimationController(duration: Duration(milliseconds: 600), vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _zoomAnimationController.dispose();
    _curvedAnimationController.dispose();
    _customAnimationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimationPage'),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text('''
zoom color
'''),
            subtitle: Column(
              children: <Widget>[
                Icon(
                  Icons.favorite,
                  color: this._colorAnimation.value,
                  size: this._zoomAnimation.value,
                ),
                Container(
                  alignment: Alignment.centerRight,
                  child: RaisedButton(
                    child: Text('run'),
                    onPressed: () {
                      switch (this._zoomAnimationController.status) {
                        case AnimationStatus.dismissed:
                          this._zoomAnimationController.forward();
                          break;
                        case AnimationStatus.forward:
                          break;
                        case AnimationStatus.reverse:
                          break;
                        case AnimationStatus.completed:
                          this._zoomAnimationController.reverse();
                          break;
                      }
                    },
                  ),
                ),
              ],
            ),
            onTap: () {},
          ),
          Divider(height: 1.0),
          ListTile(
            title: Text('''
curved
'''),
            subtitle: Column(
              children: <Widget>[
                FadeTransition(
                  opacity: this._curvedAnimation,
                  child: Image.network('https://resources.ninghao.net/images/candy-shop.jpg'),
                ),
                Container(
                  width: 100.0,
                  height: 100.0,
                  child: Icon(
                    Icons.favorite,
                    size: this._curvedAnimation.value * 100,
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    RaisedButton(
                        child: Text('run'),
                        onPressed: () {
                          switch (this._curvedAnimationController.status) {
                            case AnimationStatus.completed:
                              this._curvedAnimationController.reverse();
                              break;
                            case AnimationStatus.dismissed:
                              this._curvedAnimationController.forward();
                              break;
                            case AnimationStatus.forward:
                              break;
                            case AnimationStatus.reverse:
                              break;
                          }
                        })
                  ],
                )
              ],
            ),
          ),
          Divider(height: 1.0),
          ListTile(
            title: Text('''
custom animated widget
            '''),
            subtitle: Column(
              children: <Widget>[
                CustomAnimated(
                  animationController: this._customAnimationController,
                  zoomAnimation: Tween(begin: 50.0, end: 160.0).animate(this._customAnimationController),
                  colorAnimation: ColorTween(begin: Colors.grey, end: Colors.red).animate(this._customAnimationController),
                  elasticOutCurvedAnimation: CurvedAnimation(parent: this._customAnimationController, curve: Curves.elasticOut),
                  easeInOutCircCurvedAnimation: CurvedAnimation(parent: this._customAnimationController, curve: Curves.easeInOutCirc),
                  easeOutQuintCurvedAnimation: CurvedAnimation(parent: this._customAnimationController, curve: Curves.easeOutQuint),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    RaisedButton(
                      child: Text('run'),
                      onPressed: () {
                        switch (this._customAnimationController.status) {
                          case AnimationStatus.dismissed:
                            this._customAnimationController.forward();
                            break;
                          case AnimationStatus.completed:
                            this._customAnimationController.reverse();
                            break;
                          case AnimationStatus.forward:
                            break;
                          case AnimationStatus.reverse:
                            break;
                          default:
                        }
                      },
                    ),
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

/// 自定义动画组件
class CustomAnimated extends AnimatedWidget {
  final AnimationController animationController;

  final Animation zoomAnimation;

  //
  final Animation colorAnimation;
  final CurvedAnimation elasticOutCurvedAnimation;
  final CurvedAnimation easeInOutCircCurvedAnimation;
  final CurvedAnimation easeOutQuintCurvedAnimation;

  CustomAnimated({
    @required this.animationController,
    @required this.zoomAnimation,
    @required this.colorAnimation,
    @required this.elasticOutCurvedAnimation,
    @required this.easeInOutCircCurvedAnimation,
    @required this.easeOutQuintCurvedAnimation,
  }) : super(listenable: animationController);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 320.0,
      child: Row(
        children: <Widget>[
          Column(
            children: <Widget>[
              Container(
                width: 160.0,
                height: 160.0,
                child: Icon(
                  Icons.favorite,
                  color: this.colorAnimation.value,
                  size: this.zoomAnimation.value,
                ),
              ),
              Container(
                width: 160.0,
                height: 160.0,
                child: Icon(
                  Icons.favorite,
                  color: this.colorAnimation.value,
                  size: this.elasticOutCurvedAnimation.value * 160,
                ),
              )
            ],
          ),
          Column(
            children: <Widget>[
              Container(
                width: 160.0,
                height: 160.0,
                child: Icon(
                  Icons.favorite,
                  color: this.colorAnimation.value,
                  size: this.easeInOutCircCurvedAnimation.value * 160,
                ),
              ),
              Container(
                width: 160.0,
                height: 160.0,
                child: Icon(
                  Icons.favorite,
                  color: this.colorAnimation.value,
                  size: this.easeOutQuintCurvedAnimation.value * 160,
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}
